<template>
	<view class="list_card">
		<view class="title">
			<view class="left">
				拼购名单（{{count}}/{{info.people_number}}）
			</view>
			<view class="right" @click="toMore">
				查看更多
			</view>
		</view>
		<view class="list_content" v-if='list.length>0'>
			<image v-for="(i,j) in list" :src="i.headimgurl" class="header_img" ></image>
		</view>
		<view class="empty" v-else >
			点击参与拼购报名吧，未购中有红包奖励哦~
		</view>

	</view>
</template>

<script>
	import {getGroupbuyList} from '@/api/shopping/shopping.js'
	export default{
		props:['id','group_id','info'],
		data(){
			return{
				isShow:false,
				count:0,
				list:[],
			}
		},
		watch:{
			info:{
				handler(value){
					this.getGroupbuyList();
				},
				deep:true
			}
		},
		mounted(){
			if(this.info.id){
				this.getGroupbuyList();
			}
		},
		methods:{
			async getGroupbuyList(data){
				const res = await getGroupbuyList({
					goods_id:this.info.id,
					group_id:this.group_id
				});
				if(res){
					this.count = res.data.length;
					if(res.data.length>15){
						this.list = res.data.splice(0,15)
					}else{
						this.list = res.data;
					}
				}
			},
			toMore(){
				let groupId =  this.group_id || 0;
				let id = encodeURIComponent(this.info.id);
				uni.navigateTo({
					url: `/pages/shopping/commodity/spelllist/index?id=${id}&&group_id=${groupId}`,
				});
			}
		}
		
	}
</script>

<style scoped lang="scss">
	@import '../../common/css/color.scss';
	.list_card {
		.title {
			height: 40rpx;
			line-height: 40rpx;
			padding: 8rpx;
			display: flex;
			justify-content: space-between;

			.left {
				font-size: 30rpx;
				color: #070707;
			}

			.right {
				font-size: 24rpx;
				color: $grey;

			}

		}
		.empty{
			line-height: 120rpx;
			color: #A1A3A4;
			text-align: center;
			font-size: 28rpx;
		}
		.list_content{
			display: flex;
			white-space: nowrap;
			margin: 10rpx 0;
			
		}
		.header_img{
			display: block;
			width: 80rpx;
			height: 80rpx;
			border-radius: 80rpx;
			margin-right: -40rpx;
		}
		
	}
</style>

